<template>
    <div class="upload-con">
        <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display:none"/>
        <div class="upload-img-con">
            <div class="upload-img-item" v-for="(item,index) of allFileList">
                <div class="upload-img-text">
                    {{item.file.name}}
                </div>
                <i class="upload-img-del fa fa-times-circle" @click.stop="fileDel(index)"></i>
                <img :src="item.file.src">
            </div>
            <div class="upload-click" @click.stop="fileClick">
                <i class="fa fa-plus-square"></i>
            </div>
        </div>
        <div class="file-size">
            选中{{allFileList.length}}个文件，共{{bytesToSize(this.size)}}
        </div>
    </div>
</template>

<script>
export default {
  props: {
    allFileList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
    //   allFileList: [],
      size: 0
    };
  },
  methods: {
    fileClick() {
      console.log("fileclick");
      document.getElementById("upload_file").click();
    },
    fileChange(el) {
      if (!el.target.files[0].size) {
        conosle.log("文件大小不能为0");
        return;
      }
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        if (files[i].type != "") {
          this.fileAdd(files[i]);
        } else {
          console.log("不能上传文件夹");
          return;
        }
      }
    },
    fileAdd(file) {
      //计算文件总大小
      this.size = this.size + file.size;

      if (file.type.indexOf("image") === -1) {
        file.src = "fa fa-file-text";
        this.allFileList.push({
          file
        });
      } else {
        let reader = new FileReader();
        reader.vue = this;
        reader.readAsDataURL(file);
        reader.onload = function() {
          file.src = this.result;
          this.vue.allFileList.push({
            file
          });
        };
      }
    },
    fileDel(index) {
      this.size = this.size - this.allFileList[index].file.size;
      this.allFileList.splice(index, 1);
    },
    bytesToSize(bytes) {
      if (bytes === 0) {
        return "0 B";
      }
      let k = 1024,
        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
        i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
    }
  },
  watch:{
      allFileList(newallFileList){
          this.$emit('upload',newallFileList)
      }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.upload-con {
    .upload-img-con {
        overflow: hidden;

        .upload-img-item {
            position: relative;
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            border: 2px solid $color-theme;
            margin: 0 20px 10px 0px;
            float: left;
            border-radius: 8px;
            overflow: hidden;

            .upload-img-text {
                position: absolute;
                bottom: 0px;
                width: 100%;
                left: 0;
                background: rgba(0, 0, 0, 0.4);
                color: #fff;
                font-size: 12px;
                line-height: 16px;
                text-align: left;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding: 0 3px;
                box-sizing: border-box;
            }

            i {
                position: absolute;
                right: 4px;
                top: 4px;
                color: #f00;
                font-size: 18px;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .upload-click {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            border: 2px solid $color-theme;
            float: left;
            line-height: 100px;
            color: $color-theme;
            font-size: 35px;
            border-radius: 8px;

            i {
            }
        }
    }

    .file-size {
        font-size: $font-size-medium;
        line-height: 20px;
        text-align: left;
    }
}
</style>
